<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("ResetPassword") }}</div>
      </div>
    </div>
    <div class="cont">
      <div class="img1"></div>
      <div class="login-type-box">
        <div
          class="lable"
          :style="selectType === 'email' ? 'color: #ffff' : ''"
          @click="selectType = 'email'"
        >
          Surel
        </div>
        <div
          class="lable"
          :style="selectType === 'mobile' ? 'color: #ffff' : ''"
          @click="selectType = 'mobile'"
        >
          Telepon
        </div>
      </div>
      <div class="frombox">
        <div class="fb-item" v-if="selectType === 'email'">
          <!-- <div class="fb-lable fb-lable-first">Email</div> -->
          <div :class="['fb-inputbox', { active: input0_active }]">
            <div class="iconbox">
              <van-icon name="envelop-o" class="email-icon" />
            </div>
            <input
              v-model="email"
              @focus="input0_active = true"
              @blur="input0_active = false"
              :placeholder="$t('Surel')"
              @input="inputValueChange"
            />
          </div>
        </div>
        <div class="fb-item phone-box" v-else>
          <!-- <div class="fb-lable fb-lable-first">Phone number</div> -->
          <div :class="['fb-inputbox', { active: input1_active }]">
            <div class="iconbox p-l" @click="goPhoneNumber">
              <img class="phone-icon" src="@/assets/img/phoneNumber.png" />
              <div class="phone-qu">
                <van-loading size="24" v-if="!areaCode" />{{ areaCode }}
              </div>
              <img class="select-icon" src="@/assets/img/select-right.png" />
            </div>
            <input
              v-model="mobile"
              @focus="input1_active = true"
              @blur="input1_active = false"
              type="text"
              :placeholder="$t('NomorTelepon')"
              @input="inputValueChange"
            />
          </div>
        </div>

        <div class="fb-item code-box">
          <div class="fb-lable">{{ $t("DapatkanKodeVerifikasi") }}</div>
          <div class="getCodebox">
            <div :class="['fb-inputbox', { active: input2_active }]">
              <div class="iconbox">
                <img src="@/assets/img/bancein.png" />
              </div>
              <input
                v-model="code"
                @focus="input2_active = true"
                @blur="input2_active = false"
                type="text"
                :placeholder="$t('Kode')"
                @keyup="code = code.replace(/[^\d]/g, '')"
                @afterpaste="code = code.replace(/[^\d]/g, '')"
                @input="inputValueChange"
              />
            </div>
            <div
              :class="['getcodebtn', { active: (mobile || email) && !time }]"
              @click="sendSMS"
            >
              <template v-if="!time">{{ $t("Dapatkan") }}</template>
              <template v-if="time">{{ time }}{{ $t("s") }}</template>
            </div>
          </div>
        </div>

        <div class="fb-item">
          <div class="fb-lable">{{ $t("AturKataSandi") }}</div>
          <div :class="['fb-inputbox', { active: input3_active }]">
            <div class="iconbox">
              <img src="@/assets/img/lock.png" />
            </div>
            <input
              v-model="password"
              @focus="input3_active = true"
              @blur="pwdBlur(password)"
              type="password"
              :placeholder="$t('AturKataSandi')"
              @input="inputValueChange"
            />
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-lable">Atur Kata Sandi Ulang</div>
          <div :class="['fb-inputbox', { active: input4_active }]">
            <div class="iconbox">
              <img src="@/assets/img/lock.png" />
            </div>
            <input
              v-model="newPassword"
              @focus="input4_active = true"
              @blur="pwdBlur(newPassword)"
              type="password"
              :placeholder="$t('AturKataSandiUlang')"
              @input="inputValueChange"
            />
          </div>
        </div>
      </div>
      <div :class="['query-btn', { disabled: disabled }]" @click="comfirm">
        Kirim
      </div>
    </div>
  </div>
</template>

<script>
import {
  httpIpLocation,
  httpGetPhoneAreaCode,
  httpForgetRegister,
  httpEmailSend,
  httpSmsSend,
} from "@/http/api";
import { phoneGetCodeNum, phoneSetCodeNum } from "@/utils/common";

let fromPath = "";

export default {
  name: "SetPassword",
  data() {
    return {
      email: "",
      selectType: "email",
      input0_active: false,
      input1_active: false,
      input2_active: false,
      input3_active: false,
      input4_active: false,
      areaCode: localStorage.getItem("areaCode") || "", //区号
      mobile: "",
      password: "",
      newPassword: "",
      code: "",
      time: 0,
      setAjax: false,
      disabled: true,
    };
  },
  created() {
    if (!this.areaCode) this.getHttpGetPhoneAreaCode();
    if (fromPath === "/phoneNumber") {
      this.selectType = "mobile";
    }
    if (this.$route.query.selectType == "mobile") {
      this.selectType = "mobile";
    }
  },
  beforeRouteEnter(to, from, next) {
    fromPath = from.path;

    next();
  },
  methods: {
    inputValueChange() {
      if (
        (this.mobile.trim() || this.email) &&
        this.password.trim() &&
        this.newPassword.trim() &&
        this.code.trim()
      )
        this.disabled = false;
      else this.disabled = true;
    },
    // 获取手机区号,所属国家
    async getHttpGetPhoneAreaCode() {
      let res = await httpGetPhoneAreaCode();
      if (res.code == 0) {
        this.phoneAreaList = res.data || [];
      }
      this.areaCode = "+1";
      // this.getHttpIpLocation();
    },
    // 获取当前ip信息
    async getHttpIpLocation() {
      let res = await httpIpLocation();
      if (res.code == 0) {
        let country = res.data?.country || "";
        this.phoneAreaList.forEach((v) => {
          if (v.country == country) this.areaCode = v.area_code;
        });
        if (!this.areaCode) this.areaCode = "+1";
      }
    },
    // 失焦
    pwdBlur(pwd) {
      this.input3_active = false;
      this.input4_active = false;
      if (pwd.length < 8 || pwd.length > 16) {
        return this.$Toast.fail(this.$t("passwordVertical"));
      }
    },
    // 发送验证码
    async sendSMS() {
      if (this.time) return;
      if (!this.mobile && !this.email)
        return this.$Toast(this.$t("phoneOrEmailTips"));

      if (this.selectType === "mobile") {
        console.log(this.mobile);
        let num = phoneGetCodeNum("resetPassword", this.mobile);
        if (num >= 3 && num < 5) {
          this.$Toast(`${this.$t("numberToSent")}${5 - num}${this.$t("time")}`);
        } else if (num > 4) {
          return this.$Toast(this.$t("numberLimitsTips"));
        }
      }

      this.time = 60;
      let timer = setInterval(() => {
        this.time -= 1;
        if (this.time <= 0) {
          this.time = 0;
          clearInterval(timer);
        }
      }, 1000);

      let res;
      if (this.selectType === "email") {
        let params = { email: this.email, code_type: "forgot_password" };
        res = await httpEmailSend(params);
      } else {
        let params = {
          mobile_area_code: this.areaCode,
          mobile: this.mobile,
          code_type: "forgot_password",
          timestamp: Math.floor(Date.now() / 1000),
        };
        res = await httpSmsSend(params);
      }
      if (res.code == 0) {
        this.$Toast.success(this.$t("Success"));
        if (this.selectType === "mobile") {
          phoneSetCodeNum("resetPassword", this.mobile);
        }
      } else {
        this.time = 0;
        clearInterval(timer);
        this.$Toast(res.msg);
      }
    },
    // 确认
    async comfirm() {
      if (this.disabled) return;
      if (this.setAjax) return;

      if (!this.password.trim())
        return this.$Toast.fail(this.$t("SetPassword"));
      if (this.password.length < 8 || this.password.length > 16) {
        return this.$Toast.fail(this.$t("passwordVertical"));
      }
      if (!this.newPassword.trim())
        return this.$Toast.fail(this.$t("aginPsdVertical"));
      if (this.password.trim() != this.newPassword.trim())
        return this.$Toast.fail(this.$t("PasswordsAreInconsistent"));
      if (!this.code.trim()) return this.$Toast.fail(this.$t("codeVertical"));

      let params = {
        type: this.selectType,
        password: this.password,
        code: Number(this.code),
        mobile_area_code: this.areaCode,
        account_name: this.selectType === "mobile" ? this.mobile : this.email,
        again_password: this.newPassword,
      };
      this.setAjax = true;
      let res = await httpForgetRegister(params);
      if (res.code == 0) {
        this.$Toast.success(this.$t("SetSucceeded"));
        this.$router.back();
      } else {
        this.$Toast(res.message);
      }
      this.setAjax = false;
    },
    goPhoneNumber() {
      // console.log(111111);
      if (!this.areaCode) return;
      this.$router.push({
        name: `phoneNumber`,
        query: {
          selectType: this.selectType,
          type: 3,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./ucenter-common.less");

.main {
  .header-card {
    width: 750px;
    height: 215px;
    // color: #ccc;
    // background: url("~@/assets/img/ucheader2.png") center/750px 215px;

    .uc-header {
      padding-top: 60px;
    }
  }

  .login-type-box {
    display: flex;
  }

  .email-icon {
    color: rgba(171, 182, 212, 1);
    font-size: 40px;
  }

  .cont {
    width: 100%;
    //background: #fff;
    position: relative;
    top: -60px;
    border-radius: 60px;
    padding: 92px 66px;

    .lable {
      font-size: 24px;
      color: rgba(171, 182, 212, 1);
      margin-bottom: 16px;
      margin-right: 10px;
    }

    .img1 {
      width: 128px;
      height: 128px;
      background: url("~@/assets/img/SetPassword.png") center/128px 128px;
      margin: auto;
      margin-bottom: 76px;
    }

    .phone-box {
      .p-l {
        width: 180px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-right: 1px solid rgba(221, 228, 243, 1);
        flex-shrink: 0;
        padding-left: 26px;
        margin-right: 20px;

        .phone-icon {
          width: 38px;
          height: 38px;
        }

        .select-icon {
          width: 40px;
          height: 40px;
        }

        .phone-qu {
          font-size: 24px;
          color: rgba(112, 126, 162, 1);
        }
      }
    }

    .code-box {
      .getcodebtn {
        width: 302px;

        background: #dfe6fc;
        box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0);
        color: #ccc;

        &.active {
          color: #fff;
          background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
          //background: rgb(72, 113, 248);
        }
      }
    }

    .query-btn {
      width: 618px;
      height: 93px;
      opacity: 1;
      /** background: linear-gradient(
        178.44deg,
        rgba(238, 220, 201, 1) 0%,
        rgba(220, 188, 155, 1) 100%
      );
      box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      font-size: 28px;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      margin-top: 108px;
      border-radius: 20px;
      transition: all 0.15s;

      &:active {
        // box-shadow: 1px 3px 4px 0px rgba(201, 173, 144, 0.51);
        transform: translateY(2px);
      }

      &.disabled {
        background: #dfe6fc;
        box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0);
        color: #ccc;
      }
    }
  }
}
</style>
